<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
	<meta http-equiv="Content-Language" content="zh-CN" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style>
    *{margin:0px;padding:0px;}
	</style>
	<script language="javascript" type="text/javascript" src="jct.js"></script>
</head>
<body>
<!-- -->
<h4>模拟数据,请用JSON书写</h4>
<textarea rows="2" style="width:100%;" id="dat">
data = {uinfo:{role:0},list:[1,2,3,4]};
</textarea>
<div>
  <div>
  <h2 style="width:49%;float:left"><span>模板源代码&nbsp;&nbsp;&nbsp;&nbsp;</span><button onclick="javascript:loadjst();">使用翻译后的trimpath JST demo数据和模板</button></h2>
    <div  style="width:49%;float:right;">
      <h2>
        <button onclick="javascript:doit('src');">原文</button>
        <button onclick="javascript:doit('clean');">jCT 清理</button>
        <button onclick="javascript:doit('parse');">jCT 解析(函数查看)</button>
        <button onclick="javascript:doit('parse',true);">jCT 解析并载入数据</button>
        <span>&nbsp;&nbsp;&nbsp;后的效果</span>
      </h2>
    </div>
  </div>
</div>

<div>
<textarea rows="25" style="width:49%;float:left;" id="src">
  <!--!$ 剔除标记-->
  <p><h1>这是 <a href="http://pre.google.com/p/jsct/">jCT</a> 模板的介绍性演示</h1></p>
  <p>此演示不能充分表现jCT的优点</p>
  <p>现在你看到的这个段内容是本演示的未经 jCT 处理的摸样</p>
  <p>由于此段和之前的段落被标记为(!$)剔除,所以此段和之前的段落只有在原文模式才可见.<hr /></p>
  <!--!-->
  <!--正常的html注释不会对jCT造成-->
  <div>
    <!--if uinfo.role == 0-->
    <span>管理员</span>
    <!--else-->
    <span>会员</span>
    <!--end-->
  </div>
  <div>循环</div>
  <ul>
    <!--for var I in list-->
    <li>+-list[I]-+</li>
    <!--!! 原文输出-->
    +-list[I]-+
    <!--!!-->
    <li>填充数据</li>
    <li>填充数据</li>
    <!--end-->
  </ul>
  <!--!@ fun1-->
  <span>存储</span>
  <!--!-->
  <!--!# fun2-->
  <span>分离存储</span>
  <!--!-->
</textarea>
<div id='out' style="width:49%;float:right;"></div>
</div>
<script>
//模拟数据
(function(){
	if (typeof (jCT) == 'undefined') {
		alert('jct.js 文件没有调入');
		return;
	}
})();
var jct;
function doit(todo,load) {
	var txt=document.getElementById('src').value;
	var v=document.getElementById('out');
  if (todo=='src')  {
    v.innerHTML=txt;
    return;
  }
  load=load||false;
	jct=jCT(txt,todo);
	if (jct) {
    if (todo=='parse' && load){
      var data ={};
      try {
        eval(document.getElementById('dat').value);
      }
      catch (e) {
        alert('模拟数据错误');
        return;
      }
      v.innerHTML=jct.Load(data);
    }else if (todo=='parse')
      if (jct.Error)
        v.innerHTML=jct.Load()+'<pre>'+jct.Error.src+'</pre>';
      else
        v.innerHTML='<pre>'+jct.Load +'</pre>';
    else if (todo=='clean')
  		v.innerHTML=jct;
	}else
		alert('false');
}
function loadjst(){
	document.getElementById('src').value=document.getElementById('jst').innerHTML;
	document.getElementById('dat').value=document.getElementById('jstd').innerHTML;
}
</script>
<pre id='jst' style="display:none">
Hello +-customer.first-+ +-customer.last-+.<br/>
Your shopping cart has +-products.length-+ item(s):
<table>
 <tr><td>Name</td>
     <td>Description</td>
     <td>Price</td>
     <td>Quantity & Alert</td>
     </tr>
 <!--for var P in products-->
     <tr>
      <td>+-products[P].name.toUpperCase()-+</td>
      <td>+-products[P].desc-+</td>
      <td>$+-products[P].price-+</td>
      <td>+-products[P].quantity-+:+-products[P].alert?products[P].alert.toUpperCase():""-+</td>
     </tr>
 <!--end-->
 <!--if products.length==0-->
     <tr><td colspan="4">No products in your cart.</tr>
 <!--end-->
</table>
<!--if customer.level == "gold"-->
    We love you!  Please check out our Gold Customer specials!
<!--else-->
    Become a Gold Customer by buying more stuff here.
<!--end-->
</pre>
<pre id='jstd' style="display:none">
data ={
  products : [
    { name: "mac", desc: "computer",price: 1000, quantity: 100, alert:null },
    { name: "ipod", desc: "music player",price:  200, quantity: 200, alert:"on sale now!" },
    { name: "cinema display", desc: "screen",price:  800, quantity: 300, alert:"best deal!" }
  ],
  customer : { first: "John", last: "Public", level: "gold" }
}
</pre>
</body>
</html>